import React, { Dispatch, SetStateAction } from 'react';
import { Menu, MenuProps, Space } from 'antd';
import { MenuItem } from '@/utils/menu';
import Router from 'next/router';
import Image from 'next/image';
import LogoSvg from '@/assets/images/logo-text.svg';
const logo = require('@/assets/images/logo.png');

export default function DefaultHeader({
  menuList,
  current,
  setCurrent,
}: {
  menuList: MenuItem[];
  current: string;
  setCurrent: Dispatch<SetStateAction<string>>;
}) {
  const onClick: MenuProps['onClick'] = (e) => {
    const menu = menuList.find((item: MenuItem) => item.key === e.key);
    setCurrent(e.key);
    Router.push(menu?.path || '');
  };
  return (
    <div
      className="header-wrapper px-20 bg-white flex items-center justify-between sticky top-0 z-10 w-full"
      style={{ height: '60px' }}
    >
      <a href="https://www.nextjs.cn/docs/getting-started" target="_blank">
        <Space>
          <Image src={logo} width={38} alt="" /> <LogoSvg />
        </Space>
      </a>
      <div className="flex-1">
        <div className="m-auto">
          <Menu
            className="custom-menu"
            mode="horizontal"
            selectedKeys={[current]}
            items={menuList}
            onClick={onClick}
            getPopupContainer={(triggerNode: any) => triggerNode.parentNode.parentNode.parentNode}
          />
        </div>
      </div>
      <div style={{ width: '260px' }}></div>
    </div>
  );
}
